<template>
  <PageWrapper>
    <a-row>
      <a-col :span="24"
        ><img
          src="/src/assets/icons/tongzhi.png"
          style="width: 30px; float: left; margin-top: 0px; margin-left: 15px; margin-right: 10px"
        />
        <p style="line-height: 25px; font-size: 15px; padding: 0px 6px; padding-left: 10px">
          “村民经营性自建房消防安全排查治理平台”自上线以来，截止今日全市共使用系统登记上账村民经营性自建房<span
            style="color: red; font-size: 20px; font-weight: bold"
          >
            {{ hourseTotalCount }}</span
          >栋，共涉及<span style="color: red; font-size: 20px; font-weight: bold">{{
            xzqCount
          }}</span
          >个区、<span style="color: red; font-size: 20px; font-weight: bold">{{ townCount }}</span
          >个乡镇街道、
          <span style="color: red; font-size: 20px; font-weight: bold">{{ villageCount }}</span
          >个村社区。其中，一层和二层共有
          <span style="color: red; font-size: 20px; font-weight: bold">{{ lc_count }}</span
          >栋（占比
          <span style="color: red; font-size: 20px; font-weight: bold">{{ lc_pencent }}</span
          >%）、三层及以上的
          <span style="color: red; font-size: 20px; font-weight: bold">{{ three_count }}</span
          >栋（占比
          <span style="color: red; font-size: 20px; font-weight: bold">{{ three_pencent }}</span
          >%）。从使用性质看，出租住人<span
            style="color: red; font-size: 20px; font-weight: bold"
            >{{ czr_count }}</span
          >栋、餐饮娱乐场所<span style="color: red; font-size: 20px; font-weight: bold">{{
            cyylcs_count
          }}</span
          >家、商店<span style="color: red; font-size: 20px; font-weight: bold">{{ sd_count }}</span
          >家、美容美发场所<span style="color: red; font-size: 20px; font-weight: bold">{{
            mrmf_count
          }}</span
          >家、生产加工场所<span style="color: red; font-size: 20px; font-weight: bold">{{
            scjgcs_count
          }}</span
          >家、医疗诊所<span style="color: red; font-size: 20px; font-weight: bold">{{
            ylzs_count
          }}</span>
          教育培训场所<span style="color: red; font-size: 20px; font-weight: bold">{{
            jypxcs_count
          }}</span
          >家、其他场所<span style="color: red; font-size: 20px; font-weight: bold">{{
            qtcs_count
          }}</span
          >家。
        </p></a-col
      >
    </a-row>
    <a-row>
      <a-col :span="4" :order="1"
        ><div class="idx_img">
          <div class="image-container" style="background-color: inherit">
            <img class="img" src="/src/assets/icons/v2_sblqmi.png" draggable="false" alt="image"
          /></div>
          <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
            <p style="padding-top: 10px"><span class="idx_title">本周自查栋数</span></p>
            <p style="text-align: center"
              ><span class="idx_text">{{ serverday }}栋</span></p
            >
          </div>
        </div></a-col
      >

      <a-col :span="4" :order="2"
        ><div class="idx_img">
          <div class="image-container" style="background-color: inherit">
            <img class="img" src="/src/assets/icons/v2_sblqud.png" draggable="false" alt="image"
          /></div>
          <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
            <p style="padding-top: 10px"><span class="idx_title">周自查率</span></p>
            <p style="text-align: center"
              ><span class="idx_text">{{ serverday_pencent }}%</span></p
            >
          </div>
        </div></a-col
      >
      <a-col :span="4" :order="3"
        ><div class="idx_img">
          <div class="image-container" style="background-color: inherit;">
            <img class="img" src="/src/assets/icons/v2_sblqr9.png" draggable="false" alt="image"
          /></div>
          <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
            <p style="padding-top: 10px;"><span class="idx_title">本月检查栋数</span></p>
            <p style="text-align: center"
              ><span class="idx_text">{{ monthday_pencent }}</span></p
            >
          </div>
        </div></a-col
      >
      <a-col :span="4" :order="4"
        ><div class="idx_img">
          <div class="image-container" style="background-color: inherit">
            <img class="img" src="/src/assets/icons/v2_sblqt0.png" draggable="false" alt="image"
          /></div>
          <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
            <p style="padding-top: 10px"><span class="idx_title">月度检查率</span></p>
            <p style="text-align: center"
              ><span class="idx_text">{{ smonthday_pencent }}%</span></p
            >
          </div>
        </div></a-col
      >
      <a-col :span="4" :order="5"
        ><div class="idx_img">
          <div class="image-container" style="background-color: inherit">
            <img class="img" src="/src/assets/icons/v2_sblqw0.png" draggable="false" alt="image"
          /></div>
          <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
            <p style="padding-top: 10px"><span class="idx_title">现有隐患个数</span></p>
            <p style="text-align: center"
              ><span class="idx_text">{{ yhnum }}</span></p
            >
          </div>
        </div></a-col
      >
      <a-col :span="4" :order="5"
        ><div class="idx_img">
          <div class="image-container" style="background-color: inherit">
            <img class="img" src="/src/assets/icons/v2_sblqya.png" draggable="false" alt="image"
          /></div>
          <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
            <p style="padding-top: 10px"><span class="idx_title">整改率</span></p>
            <p style="text-align: center"><span class="idx_text">98%</span></p>
          </div>
        </div></a-col
      >
    </a-row>
    <a-row style="margin-top: 20px">
      <a-col :span="12">
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item label="窗口护栏拆除情况" style="padding: 10px 10px">
            <div class="table-container" style="padding: 3px 0px"
              ><a-table :columns="hlcccolumns" :data-source="hlcc_data" :pagination="false"
            /></div>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :span="12">
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item label="满足两条人员疏散通道建设情况" style="padding: 10px 10px">
            <div class="table-container" style="padding: 3px 0px">
              <a-table :columns="sstdcolumns" :data-source="sstd_data" :pagination="false"
            /></div>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item
            label="清理室内违规停放电动自行车情况"
            style="padding: 10px 10px; margin-right: 10px"
          >
            <div class="table-container" style="padding: 3px 0px; height: 200px"
              ><a-table :columns="ddccolumns" :data-source="ddc_data" :pagination="false"
            /></div>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :span="12">
        <a-descriptions layout="vertical" bordered>
          <a-descriptions-item label="基本信息统计" style="padding: 10px 10px">
            <a-row style="margin-bottom: 20px; margin-top: 10px">
              <a-col :span="8"
                ><div class="idx_img">
                  <div
                    class="image-container"
                    style="background-color: inherit; padding-bottom: 10px"
                  >
                    <img
                      class="img"
                      src="/src/assets/icons/v2_sblzp3.png"
                      draggable="false"
                      alt="image"
                  /></div>
                  <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
                    <p style="padding-top: 10px"><span class="idx_title">总居住人口数</span></p>
                    <p style="text-align: center"
                      ><span class="idx_text">{{ zjzr_count }}人</span></p
                    >
                  </div>
                </div></a-col
              >
              <a-col :span="8"
                ><div class="idx_img">
                  <div class="image-container" style="background-color: inherit">
                    <img
                      class="img"
                      src="/src/assets/icons/v2_sbm03v.png"
                      draggable="false"
                      alt="image"
                  /></div>
                  <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
                    <p style="padding-top: 10px"><span class="idx_title">租住人口数</span></p>
                    <p style="text-align: center"
                      ><span class="idx_text">{{ czzr_count }}人</span></p
                    >
                  </div>
                </div></a-col
              >
              <a-col :span="8"
                ><div class="idx_img">
                  <div class="image-container" style="background-color: inherit">
                    <img
                      class="img"
                      src="/src/assets/icons/v2_sbm06a.png"
                      draggable="false"
                      alt="image"
                  /></div>
                  <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
                    <p style="padding-top: 10px"><span class="idx_title">出租房间数</span></p>
                    <p style="text-align: center"
                      ><span class="idx_text">{{ czfj_count }}间</span></p
                    >
                  </div>
                </div></a-col
              >
            </a-row>
            <a-row>
              <a-col :span="8"
                ><div class="idx_img">
                  <div class="image-container" style="background-color: inherit">
                    <img
                      class="img"
                      src="/src/assets/icons/v2_sbm08y.png"
                      draggable="false"
                      alt="image"
                  /></div>
                  <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
                    <p style="padding-top: 10px"><span class="idx_title">外卖人员数</span></p>
                    <p style="text-align: center"
                      ><span class="idx_text">{{ wmrs_count }}人</span></p
                    >
                  </div>
                </div></a-col
              >
              <a-col :span="8"
                ><div class="idx_img">
                  <div class="image-container" style="background-color: inherit">
                    <img
                      class="img"
                      src="/src/assets/icons/v2_sbm0c2.png"
                      draggable="false"
                      alt="image"
                  /></div>
                  <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
                    <p style="padding-top: 10px"><span class="idx_title">电动自行车数</span></p>
                    <p style="text-align: center"
                      ><span class="idx_text">{{ ddc_count }}辆</span></p
                    >
                  </div>
                </div></a-col
              >
              <a-col :span="8"
                ><div class="idx_img">
                  <div class="image-container" style="background-color: inherit">
                    <img
                      class="img"
                      src="/src/assets/icons/v2_sbm0ag.png"
                      draggable="false"
                      alt="image"
                  /></div>
                  <div id="text-dom-ili1gfchU9JX0EwcEfIHAr" class="text">
                    <p style="padding-top: 10px"><span class="idx_title">现有充电接口数</span></p>
                    <p style="text-align: center"
                      ><span class="idx_text">{{ cdjksl_count }}个</span></p
                    >
                  </div>
                </div></a-col
              >
            </a-row>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  import {
    getbaseinfodetail,
    gethourseInfodetail,
    getccfhwqklist,
    getsstdbqklist,
    getCheckhourseInfodetail,
    getddzxclist,
  } from '/@/api/demo/hoursebase';
  import { number } from 'vue-types';
  const loading = ref(true);
  const hlcccolumns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
    },
    {
      title: '行政区域',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '现有数量',
      dataIndex: 'zcount',
      key: 'zcount',
      align: 'center',
    },
    {
      title: '已拆除数量',
      key: 'ccfhwggptzlsl',
      dataIndex: 'ccfhwggptzlsl',
      align: 'center',
    },
    {
      title: '剩余数量',
      dataIndex: 'sy',
      key: 'sy',
      align: 'center',
    },
    {
      title: '拆除率',
      dataIndex: 'ccl_pencent',
      key: 'ccl_pencent',
      align: 'center',
    },
  ];
  let hlcc_data = ref<any>([]);
  const getHlccTableData = async () => {
    loading.value = true;
    let res = await getccfhwqklist();
    console.log('*********************', res);

    loading.value = false;
    let list = res;
    hlcc_data.value = list;
  };

  const sstdcolumns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
    },
    {
      title: '行政区域',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
    },
    {
      title: '房屋总数',
      dataIndex: 'zcount',
      key: 'zcount',
      align: 'center',
    },
    {
      title: '已达标数量',
      key: 'ssltdbfjsl',
      dataIndex: 'ssltdbfjsl',
      align: 'center',
    },
    {
      title: '未达标数量',
      dataIndex: 'no_ssltdbfjsl',
      key: 'no_ssltdbfjsl',
      align: 'center',
    },
    {
      title: '达标率',
      dataIndex: 'dbl_pencent',
      key: 'dbl_pencent',
      align: 'center',
    },
  ];
  let sstd_data = ref<any>([]);
  const getSstdTableData = async () => {
    loading.value = true;
    let res = await getsstdbqklist();
    console.log('*********************', res);

    loading.value = false;
    let list = res;
    sstd_data.value = list;
  };
  const ddccolumns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
    },
    {
      title: '行政区域',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
    },
    {
      title: '电动车总数',
      dataIndex: 'bdfwjzrydddzxcsl',
      key: 'bdfwjzrydddzxcsl',
      align: 'center',
    },
    {
      title: '清理数量',
      key: 'qlddcsl',
      dataIndex: 'qlddcsl',
      align: 'center',
    },
  ];
  let ddc_data = ref<any>([]);
  const getddcTableData = async () => {
    loading.value = true;
    let res = await getddzxclist();
    console.log('*********************', res);

    loading.value = false;
    let list = res;
    ddc_data.value = list;
  };
  let hourseTotalCount = ref(0);
  let xzqCount = ref(0);
  let townCount = ref(0);
  let villageCount = ref(0);
  let lc_count = ref(0);
  let three_count = ref(0);
  let lc_pencent = ref(0);
  let three_pencent = ref(0);
  let czr_count = ref(0);
  let cyylcs_count = ref(0);
  let sd_count = ref(0);
  let mrmf_count = ref(0);
  let scjgcs_count = ref(0);
  let ylzs_count = ref(0);
  let jypxcs_count = ref(0);
  let qtcs_count = ref(0);

  let zjzr_count = ref(0);
  let czzr_count = ref(0);
  let czfj_count = ref(0);
  let wmrs_count = ref(0);
  let ddc_count = ref(0);
  let cdjksl_count = ref(0);

  let serverday = ref(0);
  let serverday_pencent = ref(0);
  let monthday_pencent = ref(0);
  let smonthday_pencent = ref(0);
  let yhnum = ref(0);
  const getLoadData = async () => {
    loading.value = true;
    let baseres = await getbaseinfodetail();
    if (baseres != null && baseres.length == 1) {
      hourseTotalCount.value = baseres[0].zcount;
      xzqCount.value = baseres[0].xzq_count;
      townCount.value = baseres[0].town_count;
      villageCount.value = baseres[0].village_count;
      lc_count.value = Number(baseres[0].onecount) + Number(baseres[0].twocount);
      three_count.value = baseres[0].threecount;
      lc_pencent.value =
        parseFloat(
          (Number(baseres[0].onecount) + Number(baseres[0].twocount)) / Number(baseres[0].zcount),
        ).toFixed(4) * 100;
      three_pencent.value =
        parseFloat(Number(baseres[0].threecount) / Number(baseres[0].zcount)).toFixed(2) * 100;

      czr_count.value =
        baseres[0].zcount -
        (baseres[0].ktvcount +
          baseres[0].cycount +
          baseres[0].sdcount +
          baseres[0].mrmfcount +
          baseres[0].jgsccount +
          baseres[0].ylzscount +
          baseres[0].jxpxcount +
          baseres[0].cscount +
          baseres[0].zlamcount +
          baseres[0].wbcount +
          baseres[0].qtcount +
          baseres[0].qpscount +
          baseres[0].mjmjcount);
      cyylcs_count.value = baseres[0].ktvcount + baseres[0].cycount;
      sd_count.value = baseres[0].sdcount; //商店
      mrmf_count.value = baseres[0].mrmfcount; //美容美发
      scjgcs_count.value = baseres[0].jgsccount; //生产加工
      ylzs_count.value = baseres[0].ylzscount; //医疗诊所
      jypxcs_count.value = baseres[0].jxpxcount;
      qtcs_count.value =
        baseres[0].cscount +
        baseres[0].zlamcount +
        baseres[0].qtcount +
        baseres[0].wbcount +
        baseres[0].mjmjcount +
        baseres[0].qpscount;

      console.log('**********基本信息***********', baseres[0]);
    }

    let items = await gethourseInfodetail();
    if (items != null && items.length > 0) {
      zjzr_count.value = items[0].jzrks;
      czzr_count.value = items[0].zzrs;
      czfj_count.value = items[0].jzfjs;
      wmrs_count.value = items[0].czryrs;
      ddc_count.value = items[0].bdfwjzrydddzxcsl;
      cdjksl_count.value = items[0].xycdjkcount;

      console.log('**********房屋基本信息***********', items[0]);
    }
    let model = await getCheckhourseInfodetail();
    if (model != null && model.length > 0) {
      serverday.value = model[0].bzcount;
      serverday_pencent.value = model[0].zcl;
      monthday_pencent.value = model[0].monthcount;
      smonthday_pencent.value = model[0].jcl;
      yhnum.value = model[0].nowyhnum;
      // serverday.value = model[0].model;
    }
  };
 
  setTimeout(() => {
    loading.value = false;
  }, 1500);
  // const loading = ref(true);
  // 获取角色
  const User = ref<any>(null);
  const { getUserInfo } = useUserStore();

  // 弹框
  const visible = ref<boolean>(false);

  // 路由信息
  const router = ref<any>(null);
  const route = ref<any>(null);
  const getUser = () => {
    User.value = getUserInfo.uname;
    // console.log('User.value', User.value);
    // console.log('getUserInfo====uname', getUserInfo.uname);
    // console.log('getUserInfo====nickname', getUserInfo.nickname);
    if (User.value === 'admin') {
      setTimeout(() => {
        showModal();
      }, 1500);
    }
  };
  // 弹框的方法
  const showModal = () => {
    visible.value = true;
  };

  // 获取路由信息
  function initRouter() {
    route.value = useRoute();
    router.value = useRouter();
  }
  onMounted(() => {
    getUser();
    initRouter();
    getLoadData();//获取基本信息
    getHlccTableData();//护栏拆除情况
    getSstdTableData();//疏散通道
    getddcTableData();
  });
</script>
<style lang="less">
  .idx_img {
    // position: absolute;
    top: 0px;
    left: 0px;
    width: 190px;
    height: 85px;
    z-index: 5;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    display: flex;
    color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    background: url('/src/assets/icons/bg.svg') no-repeat;
  }
  .img {
    width: 55px;
    height: 55px;
    display: block;
    transform: translate(0px, 0px) rotate(0deg);
    margin: 12px 5px;
  }
  .idx_text {
    color: rgb(16, 16, 16);
    font-size: 18px;
    font-family: SourceHanSansSC;}
  .idx_title {
    color: rgb(16, 16, 16);
    font-size: 15px;
    font-family: SourceHanSansSC;
  }
  .text {
    width: 80%;
    text-align: center;
  }
  .indexContent {
    // border: 1px solid red;
    height: 100%;
    display: flex;
    align-items: center;
    background-image: url('../../../assets/images/login-bg.png');
    background-size: 100% 100%;
    flex-wrap: wrap;
    flex-direction: column;
    .top {
      margin-top: 100px;
      width: 50%;
      height: 40px;
      // border: 1px solid red;
    }
    .content {
      width: 50%;
      flex: 1;
      // border: 1px solid green;
      display: flex;
      // justify-content: space-evenly;
      justify-content: space-between;
      align-items: center;
      .item {
        width: 150px;
        height: 150px;
        border-radius: 5px;
      }
    }
  }

  .full-modalshy {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-close-x {
      display: none;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
    .ant-modal-header {
      display: none;
    }
    .ant-modal-footer {
      display: none;
      border: 1px solid red;
    }
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td,
  .ant-table tfoot > tr > th,
  .ant-table tfoot > tr > td {
    padding: 12px 16px !important;
  }
  .table-container {
    width: 100%; /* 或者具体的宽度值 */
    overflow: auto; /* 开启滚动条 */
    height: 320px;
  }
</style>
